<template>
  <div id="app" :style="globalUI">
    <el-container>
        <el-header style="height:auto;">
          <page-header :user="user"></page-header>
        </el-header>
        <div class="page-content">
          <div class="left_menu">
            <el-radio-group v-model="isCollapse" size="mini" text-color="#fff"  class="controll_btn">
              <el-radio-button :label="false" v-show="isCollapse"><i class="el-icon-caret-right"></i></el-radio-button>
              <el-radio-button :label="true"  v-show="!isCollapse"><i class="el-icon-caret-left"></i></el-radio-button>
            </el-radio-group>
            <el-aside width="150px;" class="system_menu">
              <aside-menu :isCollapse="isCollapse"  v-on:collapsed ="switchCollapse"></aside-menu>
            </el-aside>
          </div>
          <el-main>
              <router-view />
          </el-main>
        </div>
    </el-container>
  </div>
</template>
<script>
import AsideMenu from '@/components/global/asideMenu.vue'
import PageHeader from '@/components/global/pageHeader.vue'
export default {
  name: 'app',
  components:{PageHeader,AsideMenu},
  computed:{
    globalUI:function(){
      return this.$store.getters.getCurStyle;
    }
  },
  // mounted(){
  //   if(this.globalUI){
  //     document.body.style.background = this.globalUI.body.background
  //   }
  // },
  data() {
    return {
      isCollapse: true,
      user:{
        name:'th'
      }
    };
  },
  methods:{
    switchCollapse(isCollapse){
      console.log(isCollapse)
      this.isCollapse = isCollapse
    }
  }
}
</script>

<style>
@import 'assets/css/global.css';
html,body{
  width: 100%;
  height: 100%;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width: 100%;
  height: 100%;
}
#app .el-container{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#app .page-content{
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
}
.left_menu{
  position: absolute;
  top:0;
  left:0;
  height: 100%;
  z-index:1001;
}
.left_menu .controll_btn{
  position: absolute;
  top:10px;
  right:-40px;
}
#app .left_menu .controll_btn .el-radio-button__inner{
  border-radius: 0 4px 4px 0;
  background:rgba(255,255,255,0.8);
  padding: 7px;
}
.left_menu .controll_btn .el-radio-button__inner  i{
  font-size: 26px;
}
#app .left_menu .system_menu{
  background:rgba(255,255,255,0.8);
}
#app .left_menu .system_menu  ul{
  background:transparent;
  height:100%;
}
#app  .el-menu--collapse{
  width:0;
}
#app .el-header{
  padding:0;
  min-height: 60px;
  box-sizing: border-box;
}
.el-aside{
  /* margin-top: 50px; */
  height:100%;
}
#app .el-main{
  padding: 0;
  box-sizing: border-box;
  height: 100%;
}
</style>
